<template>
  <div>
    <UserTable ref="userTable" @open-edit="openForm">
      <el-button type="primary" text @click="openForm(null)">open form</el-button>
    </UserTable>
    <el-dialog v-model="visible" append-to-body>
      <UserForm ref="userForm" @complete="closeDialog"></UserForm>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import UserForm from "@/components/UserForm.vue";
import UserTable from "@/components/UserTable.vue";

export default {
  name: "QueryTable",
  components: {UserForm, UserTable},
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    closeDialog() {
      this.visible = false;
      if (this.$refs.userTable) {
        this.$refs.userTable.init();
      }
    },
    openForm(user) {
      this.visible = true;
      this.$nextTick(() => {
        if (this.$refs.userForm) {
          this.$refs.userForm.setUser(user);
        }
      });
    },
  },
};
</script>

<style scoped>
</style>